<template>
  <view class="empty-container" :style="{ paddingTop: `${paddingTop}rpx` }">
    <image class="empty-icon" :src="src" mode="scaleToFill" />
    <view class="text">{{ text }}</view>
    <view class="hb-flex hb-justify-center hb-mt-3">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { propTypes } from '@/utils/propTypes';
  import { ref } from 'vue';

  const src = ref('https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/empty-icon.png');
  // 统一缺省组件
  defineProps({
    text: propTypes.string.def('暂无内容'),
    paddingTop: propTypes.number.def(100),
  });
</script>

<style lang="scss" scoped>
  .empty-container {
    text-align: center;
    .empty-icon {
      width: 328rpx;
      height: 200rpx;
      margin-bottom: 10rpx;
    }
    .text {
      color: #999;
      font-size: 30rpx;
      font-weight: 500;
    }
  }
</style>
